import React, { forwardRef, useEffect, useState } from 'react'
import {Form,Input,Select} from 'antd'

const {Option} = Select 
//forwardRef() 方法 把UserList父组件的ref对象传递到子组件
const UserForm = forwardRef((props,ref) => {

    const [isDisabled,setisDisabled] = useState(false)
    //27. 21:33
    useEffect(()=>{
      setisDisabled(props.isUpdateDisabled)
    },[props.isUpdateDisabled])


  return (
    <div>
        <Form
            ref={ref}
            layout="vertical"
        >
          <Form.Item
            name="username"
            label="用户名"
            // rules 表单校验规则
            rules={[{required: true,
                message: '对对对',},]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            // rules 表单校验规则
            rules={[{required: true,
                message: '对对对',},]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="region"
            label="区域"
            // rules 表单校验规则
            rules={isDisabled ? [] : [{required: true,
                message: '对对对',},]}
          >
            <Select disabled={isDisabled}>
              {/* map遍历渲染N个值 */}
              {props.regionList.map(item=><Option value={item.value} key={item.id}>{item.tatle}</Option>)}
            </Select>
          </Form.Item>
          <Form.Item
            name="roleId"
            label="角色"
            // rules 表单校验规则
            rules={[{required: true,message: '对对对',},]}
          >
            <Select onChange={(value)=>{
                // console.log(value);
                if(value===1){
                    setisDisabled(true)
                    ref.current.setFieldsValue({
                        region:''
                    })
                }else{
                    setisDisabled(false)
                }
            }}>
              {/* map遍历渲染N个值 */}
              {props.roleList.map(item=><Option value={item.id} key={item.id}>{item.roleName}</Option>)}
            </Select>
          </Form.Item>
        </Form>
    </div>
  )
})
export default UserForm